<template>
	<div>
		<el-row>
			<el-col :span="1" class="labelCol">
				<p class="labelText">维系开始:</p>
			</el-col>
			<el-col :span="3">
				<el-date-picker size="small" v-model="condition.date.startTime" format="yyyy-MM-dd" :editable=false type="date" placeholder="开始日期" style="width:95%">
				</el-date-picker>
			</el-col>
			<el-col :span="1" class="labelCol">
				<p class="labelText">维系结束:</p>
			</el-col>
			<el-col :span="3">
				<el-date-picker size="small" v-model="condition.date.stopTime" format="yyyy-MM-dd" :editable=false type="date" placeholder="结束日期" style="width:95%">
				</el-date-picker>
			</el-col>
			<el-col :span="1" class="labelCol">
				<p class="labelText">车主名称:</p>
			</el-col>
			<el-col :span="3">
				<el-input size="small" placeholder="车主姓名" v-model="condition.name">
				</el-input>
			</el-col>
			<el-col :span="1" class="labelCol">
				<p class="labelText">车牌号:</p>
			</el-col>
			<el-col :span="3">
				<el-input size="small" placeholder="车牌号" v-model="condition.plateNum">
				</el-input>
			</el-col>
      	<el-col :span="1" class="labelCol">
				<p class="labelText">VIN:</p>
			</el-col>
			<el-col :span="3">
				<el-input size="small" placeholder="车牌号" v-model="condition.vin">
				</el-input>
			</el-col>
</el-row>
		<el-row>
			<el-col :span="1" class="labelCol">
				<p class="labelText">跟进日期:</p>
			</el-col>
			<el-col :span="3">
				<el-date-picker size="small" v-model="condition.nextDate" format="yyyy-MM-dd" :editable=false type="date" placeholder="持续跟进日期" style="width:100%">
				</el-date-picker>
			</el-col>

			<el-col :span="1" class="labelCol">
				<p class="labelText">选择人员:</p>
			</el-col>
			<el-col :span="3">
				<el-select size="small" v-model="condition.saId" placeholder="请选择人员" clearable>
					<el-option v-for="item in peopleCombo" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-col>
		
			<el-col :span="1" class="labelCol">
				<p class="labelText">是否跟进:</p>
			</el-col>
			<el-col :span="3">
				<el-select size="small" v-model="condition.newRemind" placeholder="持续跟进" clearable>
					<el-option v-for="item in newRemindComboData" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-col>
			<el-col :span="1" class="labelCol">
				<p class="labelText">维系大类:</p>
			</el-col>
			<el-col :span="3">
				<el-select size="small" v-model="condition.parentId" @change="changeWxType" placeholder="选择维系类别" clearable>
					<el-option v-for="item in parentIdCombo" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-col>
     
			<el-col :span="1" class="labelCol">
				<p class="labelText">电话状态:</p>
			</el-col>
			<el-col :span="3">
				<el-select size="small" v-model="condition.resultA" @change="changeresultA" clearable>
							<el-option v-for="item in resultACombo" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-col>
	 	</el-row>
		<el-row>  
			<el-col :span="1" class="labelCol">
				<p class="labelText">邀约状态</p>
			</el-col>
			<el-col :span="3">
				<el-select size="small" v-model="condition.resultB" @change="changeresultB" clearable>
												<el-option v-for="item in resultBCombo" :label="item.label" :value="item.value"></el-option>

				</el-select>
			</el-col>
      
			<el-col :span="1" class="labelCol" >
				<p class="labelText">邀约原因:</p>
			</el-col>
			<el-col :span="3" >
				<el-select size="small" v-model="condition.resultC" clearable>
																<el-option v-for="item in resultCCombo" :label="item.label" :value="item.value"></el-option>

				</el-select>
			</el-col>
			<el-col :span="1" class="labelCol">
				<p class="labelText">战败去向:</p>
			</el-col>
			<el-col :span="3" >
				<el-select size="small" v-model="condition.resultD" clearable>
																				<el-option v-for="item in resultDCombo" :label="item.label" :value="item.value"></el-option>


				</el-select>
			</el-col>
			<el-col :span="4">
				<el-button type="primary" size="small" v-on:click='baseQuery'>查询</el-button>
				<el-button type="primary" size="small" @click="contactOut" v-if="btnGroup.out">导出</el-button>
			</el-col>
      	</el-row>
		<el-row>  
			<el-col :span="4">
				<audio controls="controls" src="" id="contRecordId" style="display:none"></audio>
			</el-col>
		</el-row>
		<el-row>
			<el-col>
				<el-table :data="tableData.dataList" @row-dblclick="dbClick" stripe border>
					<el-table-column prop="plateNum" label="车牌号" width="110">
					</el-table-column>
          <el-table-column prop="vin" label="VIN" width="110">
					</el-table-column>
					<el-table-column prop="contactName" label="车主" width="150">
					</el-table-column>
          <el-table-column prop="contactPhone" label="车主电话" width="130">
					</el-table-column>
					<el-table-column label="录音" width="100">
						<template scope="scope">
							<el-button @click.native.prevent="playRow(scope.$index, tableData.dataList)" type="success" size="small" v-if="scope.row.recordUrl!='' && scope.row.recordUrl!=null ">
								有录音
							</el-button>
						</template>
					</el-table-column>
			
					
					<el-table-column prop="series" label="车系" width="120">
					</el-table-column>
					<el-table-column prop="saName" label="客户经理" width="100">
					</el-table-column>
					<el-table-column prop="title" label="维系类别" width="140">
					</el-table-column>
					<el-table-column prop="content" label="维系内容" width="200">
					</el-table-column>
		      <el-table-column prop="nextDate" label="跟进日期" width="100">
					</el-table-column>
           <el-table-column prop="nextContent" label="跟进内容" width="100">
					</el-table-column>

					<el-table-column prop="resultA" label="电话状态" width="120">
					</el-table-column>
					<el-table-column prop="resultB" label="沟通结果" width="100">
					</el-table-column>
					<el-table-column prop="resultC" label="结果明细" width="120">
					</el-table-column>
					<el-table-column prop="resultD" label="战败去向" width="130">
					</el-table-column>

				</el-table>
				<el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="CurentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout="total,prev, pager, next" :total="tableData.total">
				</el-pagination>
			</el-col>
		</el-row>
		<el-dialog title="查看客户信息" v-model="customShow">
			<customer :qType="qType" :qValue="qValue" :qCompanyId="queryCompanyId"  v-if="customShow"></customer>
		</el-dialog>
	</div>
</template>
<script>
import moment from "moment";
export default {
  data: function() {
    return {
      // 集团套套
      queryArea: "",
      queryBrand: "",
      queryCompanyId: window.localStorage.getItem("companyId"),
      queryAreaCombo: [],
      queryBrandCombo: [],
      queryCompanyCombo: [],

      qType: "",
      qValue: "",
      customShow: false,
      msg: "123",
      //页码数
      CurentPage: 1,
      //每页的数量
      page: this.page,

      //查询条件车系
      seriesComboData: [],

      //分组数据
      tableData: {
        total: 0,
        dataList: []
      },

      peopleCombo: [],
      //时长
      recordpeopleCombo: [
        {
          label: "0-30秒",
          value: "0"
        },
        {
          label: "30-60秒",
          value: "1"
        },
        {
          label: "1-2分钟",
          value: "2"
        },
        {
          label: "2-3分钟",
          value: "3"
        },
        {
          label: "3-5分钟",
          value: "4"
        },
        {
          label: "5分钟以上",
          value: "5"
        }
      ],
      //车龄
      parentIdCombo: [],
      resultACombo: [],
      resultBCombo: [],
      resultCCombo: [],
      resultDCombo: [],
      // 电话接通结果
      wxTelRes: [],
      //电话接通
      wxTelSucRes: [],
      //电话未接通
      wxTelFaRes: [],
      // 邀约成功
      wxTelSucSuc: [],
      // 持续邀约
      wxTelSucConBy: [],
      wxTelSucConBx: [],
      // 战败
      wxTelSucFalBy: [],
      wxTelSucFalBx: [],
      wxTelSucFalTargetBy: [],
      wxTelSucFalTargetBx: [],
      //状态
      newRemindComboData: [
        {
          label: "继续跟进",
          value: "1"
        },
        {
          label: "不再跟进",
          value: "0"
        }
      ],
      //保养地点
      missTargetCombo: [],
      //查询条件的对象
      condition: {
        resultA: "",
        resultB: "",
        resultC: "",
        resultD: "",
        name: "",
        vin: "",
        plateNum: "",
        saId: "",
        recorldLength: "",
        newRemind: "",
        parentId: "",
        date: {
          startTime: "",
          stopTime: ""
        },
        nextDate: "",
        companyId: ""
      },
      rightDate: "",
      //字典转换值
      deptConvertData: {},
      //短信名称转换值
      typeConvertData: {},
      //业务系统字典
      moduleCombo: [],
      xc: 0,
      lsfh: 0,
      shzl: 0,
      btnGroup: {}
    };
  },

  methods: {

    // 
    changeWxType:function(){
      if (this.$data.condition.resultresultB != ""){
          this.changeresultB();
      }
    },
    //改变回访结果
    changeresultA: function() {
      this.$data.condition.resultB = "";
      this.$data.condition.resultC = "";
      this.$data.condition.resultD = "";
      //
      this.$data.resultBCombo = [];
      this.$data.resultCCombo = [];
      this.$data.resultDCombo = [];
      debugger;
      if (this.$data.condition.resultA == "接通") {
        this.$data.resultBCombo = this.$data.wxTelSucRes;
      } else if (this.$data.condition.resultA == "未接通"){
        this.$data.resultBCombo = this.$data.wxTelFaRes;
      }else{
        debugger;
        this.$data.resultBCombo=[];
      }
    },
    //改变有意进店
    changeresultB: function() {
      this.$data.condition.resultC = "";
      this.$data.condition.resultD = "";
      //
      this.$data.resultCCombo = [];
      this.$data.resultDCombo = [];
      if (this.$data.condition.parentId == "bx") {
        if (this.$data.condition.resultB == "战败") {
          this.$data.resultCCombo = this.$data.wxTelSucFalBx;
          this.$data.resultDCombo = this.$data.wxTelSucFalTargetBx;
        } else if (this.$data.condition.resultB == "持续跟进") {
          this.$data.resultCCombo = this.$data.wxTelSucConBx;
          this.$data.resultDCombo = [];
        } else if (this.$data.condition.resultB == "邀约成功") {
          this.$data.resultCCombo = this.$data.wxTelSucSuc;
          this.$data.resultDCombo = [];
        }
      } else {
        if (this.$data.condition.resultB == "战败") {
          this.$data.resultCCombo = this.$data.wxTelSucFalBy;
          this.$data.resultDCombo = this.$data.wxTelSucFalTargetBy;
        } else if (this.$data.condition.resultB == "持续跟进") {
          this.$data.resultCCombo = this.$data.wxTelSucConBy;
          this.$data.resultDCombo = [];
        } else if (this.$data.condition.resultB == "邀约成功") {
          this.$data.resultCCombo = this.$data.wxTelSucSuc;
          this.$data.resultDCombo = [];
        }
      }
    },
  

    dbClick: function(row, event) {
      this.$data.customShow = true;
      this.$data.qType = 1;
      this.$data.qValue = row.vin;
    },
    //获取当月第一天
    getCurrentMonthFirst: function() {
      var date = new Date();
      date.setDate(1);
      return date;
    },
    //获取当月最后一天
    getCurrentMonthLast: function() {
      var date = new Date();
      var currentMonth = date.getMonth();
      var nextMonth = ++currentMonth;
      var nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1);
      var oneDay = 1000 * 60 * 60 * 24;
      return new Date(nextMonthFirstDay - oneDay);
    },

    //查询
    baseQuery: function() {
      debugger;
      if (
        this.$data.condition.date.startTime != undefined &&
        this.$data.condition.date.startTime != ""
      ) {
        this.$data.condition.date.startTime = this.moment(
          this.$data.condition.date.startTime
        ).format("YYYY-MM-DD");
      } else {
        this.$data.condition.date.startTime = "";
      }
      if (
        this.$data.condition.date.stopTime != undefined &&
        this.$data.condition.date.stopTime != ""
      ) {
        this.$data.condition.date.stopTime = this.moment(
          this.$data.condition.date.stopTime
        ).format("YYYY-MM-DD");
      } else {
        this.$data.condition.date.stopTime = "";
      }

      if (
        this.$data.condition.nextDate != undefined &&
        this.$data.condition.nextDate != ""
      ) {
        this.$data.condition.nextDate = this.moment(
          this.$data.condition.nextDate
        ).format("YYYY-MM-DD");
      } else {
        this.$data.condition.nextDate = "";
      }
      this.$data.condition.companyId = this.$data.queryCompanyId;
      this.$http
        .post(this.API_ROOT + "/crm/contact/page", this.$data.condition, {
          params: {
            page: this.$data.CurentPage,
            limit: this.page.pageSize
          }
        })
        .then(
          resp => {
            if (resp.data.success) {
              resp.data.total = parseInt(resp.data.total);
            
              this.$data.tableData = resp.data;
             
            } else {
              //
              this.$message.error(resp.data.msg);
            }
          },
          resp => {}
        );
    },
    //维系记录导出
    contactOut: function() {
      if (
        this.$data.condition.date.startTime != undefined &&
        this.$data.condition.date.startTime != ""
      ) {
        this.$data.condition.date.startTime = this.moment(
          this.$data.condition.date.startTime
        ).format("YYYY-MM-DD");
      } else {
        this.$data.condition.date.startTime = "";
      }
      if (
        this.$data.condition.date.stopTime != undefined &&
        this.$data.condition.date.stopTime != ""
      ) {
        this.$data.condition.date.stopTime = this.moment(
          this.$data.condition.date.stopTime
        ).format("YYYY-MM-DD");
      } else {
        this.$data.condition.date.stopTime = "";
      }
      if (
        this.$data.condition.nextDate != undefined &&
        this.$data.condition.nextDate != ""
      ) {
        this.$data.condition.nextDate = this.moment(
          this.$data.condition.nextDate
        ).format("YYYY-MM-DD");
      } else {
        this.$data.condition.nextDate = "";
      }
      this.$data.condition.companyId = this.$data.queryCompanyId;
      this.$http
        .post(
          this.API_ROOT + "/crm/contact/exclContact",
          this.$data.condition,
          {
            params: {
              companyId: this.$data.queryCompanyId
            }
          }
        )
        .then(
          resp => {
            if (resp.data.success) {
              window.location.href =
                this.API_ROOT +
                "/base/exp/xlsx?fileId=" +
                resp.data.data +
                "&&fileName=维系记录导出-" +
                this.moment().format("YYYYMMDDHHmmss") +
                "&&fileType=xlsx";
            }
          },
          resp => {}
        );
    },

    //列表，分页大小切换
    handleSizeChange: function() {},
    //列表,当前页切换
    handleCurrentChange: function(currentPage) {
      this.$data.CurentPage = currentPage;
      //this.$data.dictGroup = '';
      this.baseQuery();
    },
    
    //播放录音
    playRow: function(index, data) {
    	debugger;
      let temp = data[index];
      if (temp == null || temp == undefined) {
        return;
      }

      let recordUrl = temp.recordUrl;
      if (recordUrl == undefined || recordUrl == null || recordUrl == "") {
        return;
      }

      var contPlay = document.getElementById("contRecordId");
      contPlay.style.display = "block";
      contPlay.src = recordUrl;
      contPlay.play();
    },

  

    changeQueryCompany: function() {
      debugger;
      //加载行政区划
      //改变人员
      this.queryPeople();
    },
    queryPeople: function() {
      this.$data.peopleCombo = [];
      this.$data.condition.saId = "";
      this.$http
        .get(this.API_ROOT + "/crm/config/organUserCombo", {
          params: {
            companyId: this.$data.queryCompanyId
          }
        })
        .then(
          response => {
            // success callback
            this.$data.peopleCombo = response.data;
            var id = localStorage.getItem("uid");
            for (var i = 0; i < this.$data.peopleCombo.length; i++) {
              if (this.$data.peopleCombo[i].value == id) {
                this.$data.condition.saId = this.$data.peopleCombo[i].value;
                debugger;
                this.baseQuery();

                break;
              }
            }
          },
          response => {
            // error callback
          }
        );
    },

    //加载字典方法
    loadDict: function() {
      // 任务大类Group 02030602
      // 保养 by
      // 保险 bx
      // 关爱 ga
      // 流失 ls
      // 自定义 qt
      // 综合 zh

      //任务状态
      this.$http
        .get(this.API_ROOT + "/base/dict/combo/groups", {
          params: {
            group:
              "02030602,by,bx,ga,qt,ls,zh,02030603,接通,未接通,保险战败,保养战败,保险跟进,保养跟进,邀约成功"
          }
        })
        .then(
          response => {
            var combo = response.data;
            this.$data.parentIdCombo = combo["02030602"];
            // this.$data.wxByChild = combo["by"];
            // this.$data.wxBxChild = combo["bx"];
            // this.$data.wxGaChild = combo["ga"];
            // this.$data.wxLsChild = combo["ls"];
            // this.$data.wxZhChild = combo["zh"];
            // this.$data.wxQtChild = combo["qt"];
            // this.$data.wxCType = combo["by"];
            //维系结果
            this.$data.resultACombo = combo["02030603"];
            this.$data.wxTelSucRes = combo["接通"];
            this.$data.wxTelFaRes = combo["未接通"];
            this.$data.wxTelSucSuc = combo["邀约成功"];
            this.$data.wxTelSucFalBy = combo["保养战败"];
            this.$data.wxTelSucFalBx = combo["保险战败"];
            this.$data.wxTelSucConBy = combo["保养跟进"];
            this.$data.wxTelSucConBx = combo["保险跟进"];
          },
          response => {}
        );
      //获取保养战败方向
      debugger;
      this.$http
        .get(this.API_ROOT + "/crm/loss/combo", {
          params: {
            typeCode: "by"
          }
        })
        .then(
          response => {
            // success callback
            debugger;
            this.$data.wxTelSucFalTargetBy = response.data;
          },
          response => {
            // error callback
          }
        );
      //获取保险战败方向

      this.$http
        .get(this.API_ROOT + "/crm/loss/combo", {
          params: {
            typeCode: "bx"
          }
        })
        .then(
          response => {
            // success callback
            this.$data.wxTelSucFalTargetBx = response.data;
          },
          response => {
            // error callback
          }
        );
    }
  },
  //表单创建时执行
  created: function() {
   
    this.queryPeople();
    this.loadDict();
    //加车系
    this.$http
      .get(this.API_ROOT + "/base/car/combo", {
        params: {
          group: "msgType"
        }
      })
      .then(
        response => {
          // success callback
          this.$data.seriesComboData = response.data;
        },
        response => {
          // error callback
        }
      );
    //人员

    this.$http({
      method: "GET",
      url: this.API_ROOT + "/rbac/login/btn", //url 输出 按照车牌号的 车牌号
      params: {
        //发送的参数
        resPath: "crm/customer/contact" //
      }
    }).then(
      function(resp) {
        var btnData = resp.data.dataList;

        var temp = {};

        for (var i = 0; i < btnData.length; i++) {
          var btnName = btnData[i].btnName;

          temp[btnName] = btnName;
        }

        Object.assign(this.$data.btnGroup, temp);
      },
      function(error) {
        // error
      }
    );
  }
};
</script>
<style>
.el-row {
  height: 30px;
}
</style>